<template>
	<body>
		<div class="title flex">
			<div class="head" :class="{active:isActibe===1}" @click="changeMode('normal',1)">全部</div>
			<div class="head" :class="{active:isActibe===2}" @click="changeMode('withdrawal',2)">提现</div>
			<div class="head" :class="{active:isActibe===3}" @click="changeMode('income',3)">收益</div>
		</div>
		<div class="box">
			<div v-if="mode=='normal'">11111111</div>
			<div v-if="mode=='withdrawal'">22222222</div>
			<div v-if="mode=='income'">33333333</div>
		</div>
	</body>

</template>

<script>
	export default {
		data() {
			return {
				mode: "normal",
				isActibe:1
			}
		},


		methods: {
			changeMode(str,i) {
				this.mode = str;
				this.isActibe=i
				
			}

		},



	}
</script>

<style>
	body{
		height: 100%;
		width: 100%;
	}
	.title {
		height: 100rpx;
		width: 450rpx;
		text-align: center;
		margin: 0 auto;
		color:gray;
	}
	.active{
		color: black;
	}
.head{
	height: 100rpx;
	width: 100rpx;
	text-align: center;
	line-height: 100rpx;
	margin: 0 auto;
}
	.flex {
		display: flex;
	}
</style>
